/**
 通用对话框组件
 
 属性参数:
 -----------------------------------------------------------------------------------------------------
 title: 对话框标题
 cancel-text: 关闭按钮文字
 display: 是否显示
 show-close-btn: 是否显示关闭按钮
 show-close-icon: 是否显示关闭图标(右上角关闭按钮)
 on-scroller: 内容区域超出显示
 -----------------------------------------------------------------------------------------------------
 
 
 事件/回调:
 -----------------------------------------------------------------------------------------------------
 show:
 原型: show()
 说明: 显示对话框时调用
 
 hide:
 原型: hide()
 说明: 关闭对话框时调用
 
 toggledisplay:
 原型: toggledisplay(value)
 说明: 关闭或者显示时调用, value为对应的关闭状态
 -----------------------------------------------------------------------------------------------------
 
 
 方法:
 -----------------------------------------------------------------------------------------------------
 show:
 原型: show()
 说明: 显示对话框
 
 hide:
 原型: hide()
 说明: 关闭对话框
 
 toggleDisplay:
 原型: toggleDisplay()
 说明: 切换显示对话框
 
 scrollBodyToTop:
 原型: scrollBodyToTop()
 说明: 滚动对话框内容到顶部
 
 scrollBodyToBottom:
 原型: scrollBodyToBottom()
 说明: 滚动对话框内容到底部
 -----------------------------------------------------------------------------------------------------
 
 
 插槽:
 -----------------------------------------------------------------------------------------------------
 默认:
 对话框内容
 
 top-buttons:
 顶部按钮栏
 
 buttons:
 底部按钮(不包括自带的关闭按钮)
 -----------------------------------------------------------------------------------------------------
 */




(function() {
let {getAppPath} = require('electron').remote.app;
let add_vue_component = require(getAppPath() + '/src/renderlib/vue/add-vue-component');
let datetime = new Date().getTime();
let className = `dialog-comp-${datetime}`;

add_vue_component('dlg', {
    scss:`
<style type="text/scss">
    .${className} {
        background: rgba(0,0,0, 0.4);
        z-index:1000;
        left:0;
        top:0;
        width:100%;
        height:100%;
        position:absolute;
        display: none;
        justify-content: center;
        align-items:center;
    
        &.active {
            display: flex;
        }
    
        .dlg-content {
            min-width: 300px;
            background: white;
            border-radius: 6px;
            padding: 6px;
            
            
            .header {
                flex:0 0 auto;
                display: flex;
                justify-content: space-between;
                
                .text {
                    display: flex;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    align-items: center;
                    padding-right:20px;
                    font-weight: bold;
                    font-size: 15px;
                }
                
                .top-buttons {
                    cursor:pointer;
                    transition: all .5s;
                    transform: rotate(0deg);
                
                    .close-btn {
                        font-size:30px;
                        
                        &:hover {
                            color:gray;
                            transform: rotate(30deg);
                        }
                    }
                }
            }
            
            .body {
                overflow: auto;
                border-bottom: solid 1px #eee;
                flex:1;
            
                &.noscroller {
                    overflow: visible;
                }
            }
            
            .buttons {
                margin-top:15px;
                text-align:right;
                flex:0 0 auto;
                padding: 0 10px 10px 10px;
            }
        }
    }
</style>
    `,
    template: `
        <div class="${className}" :class="{active:uiDisplay}" :style="{zIndex:uiZIndex}">
            <div class="dlg-content" :class="{active:uiDisplay}">
                <div class="header">
                    <span class="text">{{title}}</span>
                    <span class="top-buttons" v-if="showCloseIcon">
                        <slot name="top-buttons"></slot>
                        <i class="close-btn iconfont icon-searchclose1" @click="uiDisplay=false"></i>
                    </span>
                </div>
                <div class="body" :class="{noscroller: noScroller}" ref="body">
                    <slot></slot>
                </div>
                <div class="buttons">
                    <slot name="buttons"></slot>
                    <btn @click="uiDisplay=false" v-if="showCloseBtn">{{cancelText}}</btn>
                </div>
            </div>
        </div>
   `,
    
    mounted() {
        let self = this;
        self.uiDisplay = self.display;
    },
    
    props:{
        zindex: {
            default: 1000,
        },
    
        title: {
            default: '对话框标题'
        },
    
        cancelText: {
            default:'关闭'
        },
    
        display: {
            default:false
        },
    
        showCloseBtn: {
            default: true
        },
    
        showCloseIcon: {
            default: true
        },
    
        noScroller: {
            default:false
        }
    },
    
    data() {
        return {
            uiDisplay: false,
            uiZIndex: 0,
        }
    },
    
    methods: {
        show() {
            this.uiDisplay = true;
        },
    
        hide() {
            this.uiDisplay = false;
        },
    
        toggleDisplay() {
            this.uiDisplay = !this.uiDisplay;
        },
    
        scrollBodyToTop() {
            this.$refs.body.scrollTop = 0;
        },
    
        scrollBodyToBottom() {
            this.$refs.body.scrollTop = this.$refs.body.scrollHeight;
        }
    },
    
    watch: {
        display() {
            this.uiDisplay = this.display;
        
            if(this.display) {
                window._hhdialog = window._hhdialog || {};
                window._hhdialog.counter =  window._hhdialog.counter || {};
                window._hhdialog.counter[this.zindex] = window._hhdialog.counter[this.zindex] || this.zindex;
                window._hhdialog.counter[this.zindex] ++;
                this.uiZIndex = window._hhdialog.counter[this.zindex];
            }
        },
    
        uiDisplay(value) {
            if(value) {
                this.$emit('show');
            } else {
                this.$emit('hide');
            }
        
            this.$emit('toggledisplay', value);
        }
    }
});
})();
